var paramStr;

//实时刷新定时器
var realTime = true;
//回放定时器
var playback = false;

//保存的是添加对对比的测点的pi地址和测点名
var addPoint;
var addServer;
$(function(){
	
	//阻止鼠标的右击事件
	document.oncontextmenu = function(e) {
		e.preventDefault();
	}
	
	var params = [];
		
	// 界面初始化展示
	$('text').each(function(){
		var element = $(this);
		var point = element.attr('pointname');
		var servers = element.attr('piservice');
		
		if(typeof(point) == undefined || null== point || '' == point){
		}else if(typeof(servers) == undefined || null== servers || '' == servers){
		}else{
			params.push({"point":point, "servers":servers});
		}
	});
	//开关量测点
	$(this).find("[pbismultistate='True']").each(function(i,item) {
		var element = $(this);
		var point = element.attr('tagname');
		var servers = element.attr('piservice');
		
		if(typeof(point) == undefined || null== point || '' == point){
		}else if(typeof(servers) == undefined || null== servers || '' == servers){
		}
		else{
			params.push({"point":point, "servers":servers});
		}
	})
	
	//柱状图测点
	$(this).find("g[id^='Bar']").each(function(i,item) {
		var point = $(item).attr('pointname');
		var servers = $(item).attr('piservice');
		
		if(typeof(point) == undefined || null== point || '' == point){
		}else if(typeof(servers) == undefined || null== servers || '' == servers){
		}else{
			params.push({"point":point, "servers":servers});
		}
	})
	
	paramStr = JSON.stringify(params);
	$.ajax({
		type:'post',
		url: ctx + "/svg/getValue",
		data:{"paramStr": paramStr, "time":function(){ return new Date().getTime();}},
		success:function(data){
			var reObj = JSON.parse(data);
			//把svg图的别名改为实时值
			$.each(reObj, function(idx, obj){
				//对svg的相关操作   开关量的颜色切换，柱形图颜色切换 ，测点值的显示
				changeSVG(idx,obj);
			});
			
			var nowTime =  formatDateTime(new Date().getTime());
			$('#nowTime').text(nowTime);
		},
		error:function(){},
	    complete: function(){
	    	timer();
	    }
	});
	
});

//对svg的相关操作   开关量的颜色切换，柱形图颜色切换 ，测点值的显示
function changeSVG(idx,obj) {

	//显示测点值
	$("text[pointname='"+ obj.point + "'][piservice='"+obj.server+"']").each(function(indesx, textObj){
		var value;
		//判断保留几位小数
		if($(textObj).attr("pbnumberformat")=="0.0") {
			value = Math.round(obj.value*10)/10;
		}else if($(textObj).attr("pbnumberformat")=="0.00") {
			value = Math.round(obj.value*100)/100;
		}else if($(textObj).attr("pbnumberformat")=="General") {
			value = obj.value;
		}else {
			value = obj.value;
		}
		//测点值加上测点的单位
		value = value + obj.engunits;
		if(obj.state != "0"){
			textObj.textContent = 'snapfix';
		}else{
			textObj.textContent = value;	
		}
	});
	
	/**开关量颜色变化开始**/
	$("g[pbismultistate='True'][piservice='"+obj.server+"'][tagname='"+obj.point+"']").each(function(i,item) {
		$(item).find("path").each(function(j,temp) {
			if(obj.state == "0"){
				if(parseInt(obj.value) == 0) {
					//缺少判断fill是否为none  为none则跳过，不填充
					if($(temp).css("fill") != "none") 
						$(temp).css("fill",$(item).attr('firstcolor'));
				}else if(parseInt(obj.value) == 1) {
						$(temp).css("fill",$(item).attr('secondcolor'));
				} 
			}else {
				//数据非法
				if($(temp).css("fill") != "none") {
					$(temp).css("fill",$(item).attr('colorbaddata'));
				}
			}
		})
	});
	
	$("polygon[pbismultistate='True'][piservice='"+obj.server+"'][tagname='"+obj.point+"']").each(function(i,item) {
		if(obj.state == "0") {
			if(parseInt(obj.value) == 0) {
				$(item).css("fill",$(item).attr('firstcolor'));
			}else if(parseInt(obj.value) == 1) {
				$(item).css("fill",$(item).attr('secondcolor'));
			} 
		}else {
			$(item).css("fill",$(item).attr('colorbaddata'));
		}
	});
	
	$("path[pbismultistate='True'][piservice='"+obj.server+"'][tagname='"+obj.point+"']").each(function(i,item) {
		if(obj.state == "0") {
			if(parseInt(obj.value) == 0) {
				$(item).css("fill",$(item).attr('firstcolor'));
			}else if(parseInt(obj.value) == 1) {
				$(item).css("fill",$(item).attr('secondcolor'));
			} 
		}else {
			$(item).css("fill",$(item).attr('colorbaddata'));
		}
	});
	/**开关量颜色变化结束**/
	
	/**柱状图颜色变化开始**/
	$("g[id^='Bar'][piservice='"+obj.server+"'][pointname='"+obj.point+"']").each(function(i,item) {
		//判断柱形图是横向还是纵向	0:竖向  1::横向
		var pborientation = $(item).attr('pborientation');
		
		/**当柱形图是横向的时候**/
		//柱形图的长度
		var width;
		//柱形图的x坐标
		var x;
		
		/**当柱形图是纵向的时候**/
		//柱形图的y坐标
		var y;
		//柱形图的高度
		var height;
		
		$(item).find("rect[id$='pbBarBoundingRectEl']").each(function(j,temp) {
			x = parseInt($(temp).attr('x'));
			width = parseInt($(temp).attr('width'));
			
			y = parseInt($(temp).attr('y'));
			height = parseInt($(temp).attr('height'));
		})
		
		if(obj.state == "0") {
			
			//对应pdi图上的left
			var pblower = parseFloat($(item).attr("pblower"));
			//对应pdi图上的right
			var pbupper = parseFloat($(item).attr("pbupper"));
			//对应pdi图上的start
			var pbstart = parseFloat($(item).attr("pbstart"));
			//保存测点的值
			var pbValue = parseFloat(obj.value);
			
			//临时变量，除数,计算测点的值占柱形图的宽度或者高度
			var divisor;
			
			/**当柱形图是横向的时候**/
			//pbstart的x坐标
			var startX;
			//标记柱形图颜色的宽度
			var pbWidth;
			//标记柱形图颜色开始的x坐标
			var pbValueX;
			
			/**当柱形图是横向的时候**/
			//pbstart的y坐标
			var startY;
			//标记柱形图颜色的高度
			var pbHeight;
			//标记柱形图颜色开始的y坐标
			var pbValueY;
			
			//竖向柱形图
			if(("0") == pborientation){
				//判断柱形图哪边的数值比较大
				if(pblower >= pbupper) {
					divisor = pbstart/(pblower - pbupper);
					//pbstart的x坐标
					startY = y + parseInt(divisor * height);
					
					//如果值比pbstart大，说明坐标应该在pbstart的下边，反之，则在上边
					if(pbValue >= pbstart) {
						//柱形的宽度
						pbHeight = parseInt((pbValue - pbstart)/(pblower - pbupper)* height);
						//柱形的x坐标
						pbValueY = startY;
					}else {
						//柱形的宽度
						pbHeight = parseInt((pbstart - pbValue)/(pblower - pbupper)* height);
						//柱形的x坐标
						pbValueY = startY - pbHeight;
					}
				}else {
					divisor = pbstart/(pbupper - pblower);
					//pbstart的x坐标
					startY = y + height - parseInt(divisor * height);
					
					//如果值比pbstart大，说明坐标应该在pbstart的下边，反之，则在上边
					if(pbValue >= pbstart) {
						//柱形的宽度
						pbHeight = parseInt((pbValue - pbstart)/(pbupper - pblower)* height);
						//柱形的x坐标
						pbValueY = startY - pbHeight;
					}else {
						//柱形的宽度
						pbHeight = parseInt((pbstart - pbValue)/(pbupper - pblower)* height);
						//柱形的x坐标
						pbValueY = startY;
					}
				}
				
				$(item).find("rect[id$='pbBarTagRectEl']").each(function(j,temp) {
					$(temp).attr("y",pbValueY)
						.attr("height",pbHeight);
				})
				
			}else {
				//判断柱形图哪边的数值比较大
				if(pblower >= pbupper) {
					divisor = pbstart/(pblower - pbupper);
					//pbstart的x坐标
					startX = width + x - parseInt(divisor * width);
					
					//如果值比pbstart大，说明坐标应该在pbstart的左边，反之，则在右边
					if(pbValue >= pbstart) {
						//柱形的宽度
						pbWidth = parseInt((pbValue - pbstart)/(pblower - pbupper)* width);
						//柱形的x坐标
						pbValueX = startX - pbWidth;
					}else {
						//柱形的宽度
						pbWidth = parseInt((pbstart - pbValue)/(pblower - pbupper)* width);
						//柱形的x坐标
						pbValueX = startX;
					} 
				}else {
					divisor = pbstart/(pbupper - pblower);
					//pbstart的x坐标
					startX = x + parseInt(divisor * width);
					
					//如果值比pbstart大，说明坐标应该在pbstart的左边，反之，则在右边
					if(pbValue >= pbstart) {
						//柱形的宽度
						pbWidth = parseInt((pbValue - pbstart)/(pbupper - pblower)* width);
						//柱形的x坐标
						pbValueX = startX;
					}else {
						//柱形的宽度
						pbWidth = parseInt((pbstart - pbValue)/(pbupper - pblower)* width);
						//柱形的x坐标
						pbValueX = startX - pbWidth;
					}
				}
				
				$(item).find("rect[id$='pbBarTagRectEl']").each(function(j,temp) {
					$(temp).attr("x",pbValueX)
						.attr("width",pbWidth);
				})
			}
		
		}else {
			//数据非法
			$(item).find("rect[id$='pbBarTagRectEl']").each(function(j,temp) {
				if(("0") == pborientation) {
					$(temp).attr("height","0");
				}else {
					$(temp).attr("width","0");
				}
			})
		}
	})
	/**柱状图颜色变化结束**/
}

//实时定时器
function timer() {
	setTimeout(function() {
		if (realTime) {
				$.ajax({
				type:'post',
				url: "/svg/getValue",
				data:{"paramStr": paramStr, "time":function(){ return new Date().getTime();}},
				success:function(data){
					var reObj = JSON.parse(data);
					$.each(reObj, function(idx, obj){
						//对svg的相关操作   开关量的颜色切换，柱形图颜色切换 ，测点值的显示
						changeSVG(idx,obj);
					});
					
					var nowTime =  formatDateTime(new Date().getTime());
					$('#nowTime').text(nowTime);
				},
				error:function(){}
			});
		}
		timer();
	}, 5000);
}

var opened;
function showMessage(obj){
	if(null != opened){
		opened.close();
	}
	var point= $(obj).attr('pointname');
	var servers = $(obj).attr('piservice');
	
	//回放开始时间
	var startTime = $("#startTime").val();
	//回放结束时间
	var endTime = $("#endTime").val();
	//回放标识 true :正在回放  false:停止回放
	
	var url ="/svg/displayPic?point="+point+"&servers="+servers+"&playback="+playback
			+"&startTime="+startTime+"&endTime="+endTime;
	$.modal.openOptions({title:"详情",url:url,width:1200,height:580,btn: ['<i class="fa fa-close"></i> 关闭'],
		callBack: function(index, layero) {
			layer.close(index);
        }
	});
}

//svg图之间的跳转
function jump(obj) {
	window.location.href =   'realTime?file=' +　obj;
}

//新增测点对比项
function addContrast() {
	piservice = addServer;
	pointname = addPoint;
	$.ajax({
		url:"isExist",
		type:"post",
		data:{point:pointname,servers:piservice},
		success:function(data){
			if(data) {
				showSuccessMessage("新增对比测点成功");
				hideRMenu();
			}else {
				showErrorMessage("新增对比测点失败！");
			}
		}
	})
}

//显示右键菜单
function showRMenu(type, x, y) {
    $("#rMenu").css({"top":y+"px", "left":x+"px", "visibility":"visible"}); //设置右键菜单的位置、可见
}
//隐藏右键菜单
function hideRMenu() {
    if ($("#rMenu")) $("#rMenu").css({"visibility": "hidden"}); //设置右键菜单不可见
}

/**
 * 回放定时器
 * @param startTime	开始时间
 * @param endTime	结束时间
 * @param step		步长（单位：s）
 * @param delay		延迟（单位：s）
 */
var playbackExist;
function playbackTime(startTime,endTime,step,delay) {
	//转成标准日期
	var startTemp = new Date(startTime);
	//转成标准日期
	var endTemp = new Date(endTime)
	
	//当回放到结束时间时，自动结束回放定时器
	if(startTemp > endTemp) {
		playback = false;
		return false;
	}
	//开始时间加上步长
	var time = formatDateTime(startTemp.getTime()+1000*step);
	
	clearTimeout(playbackExist);
	
	playbackExist = setTimeout(function() {
		if (playback) {
				$.ajax({
				type:'post',
				url:  ctx + "/svg/getPlayBackValue",
				data:{"paramStr": paramStr, "time": time},
				success:function(data){
					var reObj = JSON.parse(data);
					$.each(reObj, function(idx, obj){
						//对svg的相关操作   开关量的颜色切换，柱形图颜色切换 ，测点值的显示
						changeSVG(idx,obj);
					});
					
					$('#nowTime').text(time);
					$('#playBackTime').val(time);
				},
				error:function(){}
			});
		}
		playbackTime(time,endTime,step,delay);
	}, 1000*delay);
}

//时间戳转成日期字符串
function formatDateTime(inputTime) {
	var date = new Date(inputTime);
	var y = date.getFullYear();
	var m = date.getMonth() + 1;
	m = m < 10 ? ('0' + m) : m;
	var d = date.getDate();
	d = d < 10 ? ('0' + d) : d;
	var h = date.getHours();
	h = h < 10 ? ('0' + h) : h;
	var minute = date.getMinutes();
	var second = date.getSeconds();
	minute = minute < 10 ? ('0' + minute) : minute;
	second = second < 10 ? ('0' + second) : second;
	return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
};

function checkIlegal() {
	if(playback) {
		showErrorMessage("当前已经是回放状态，请勿重复点击！");
		return false;
	}
	
	if($("#startTime").val() == '') {
		showErrorMessage("开始时间不可为空！");
		return false;
	}
	
	if($("#endTime").val() == '') {
		showErrorMessage("结束时间不可为空！");
		return false;
	}
	
	if($("#step").val() == '') {
		showErrorMessage("步长不可为空！");
		return false;
	}
	
	if($("#delay").val() == '') {
		showErrorMessage("延迟不可为空！");
		return false;
	}
	
	if($("#startTime").val()>$("#endTime").val()){
			showErrorMessage("开始时间必须小于结束时间");
			return false;
	}
	
	return true;
}
